<template>
  <Table class="baseBox" :dataSource="roleList" :columns="columns">
    <template #header>
      <a-space>
        <a-button size="samll" type="primary" @click="add">新增</a-button>
      </a-space>
    </template>
    <template #action="{ record }">
      <a-space>
        <a @click="edit(record)">编辑</a>
        <a @click="openRoleMenu(record)">权限</a>
        <a-popconfirm
          title="是否删除？"
          ok-text="确认"
          cancel-text="取消"
          @confirm="del(record)"
        >
          <a>删除</a>
        </a-popconfirm>
      </a-space>
    </template>
  </Table>
  <!-- 编辑 -->
  <Edit v-model:visible="editVisible" :tempData="selectInfo" @reload="reload" />
  <!-- 角色菜单 -->
  <RoleMenu v-model:visible="roleMenuVisible" :tempData="selectInfo" @reload="reload" />
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import Table from "@/components/Table";
import { roleApi } from "@/api/role";
import Edit from "./Edit";
import RoleMenu from "./RoleMenu";
const columns = [
  {
    title: "角色名称",
    dataIndex: "name",
  },
  {
    title: "操作",
    slots: { customRender: "action" },
    width:140
  },
];

const roleList = ref([]);
const selectInfo = ref({});

const editVisible = ref(false);
const roleMenuVisible = ref(false);

onMounted(() => {
  getData();
});

async function getData(page = 1) {
  const result = await roleApi.page({
    page_size: 10,
    current_page: page,
  });
  const { list, pages } = result;
  roleList.value = list;
}

function add() {
  selectInfo.value = {};
  editVisible.value = true;
}
function edit(item) {
  selectInfo.value = item;
  editVisible.value = true;
}
function openRoleMenu(item) {
  selectInfo.value = item;
  roleMenuVisible.value = true;
}
async function del(item) {
  const { id } = item;
  await roleApi.delete({ id });

  roleList.value = roleList.value.filter((i) => i.id != id);
  reload();
}
function reload() {
  getData();
}
</script>

<style lang="less" scoped></style>
